import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { alertDispatch } from '@/utils'
// import { SUCCESS } from '@/components/Alert/alertTypes'
import CheckLogin from '@/components/CheckLogin'
import { GetHomeApi } from '@/Api'
import { useHistory } from 'react-router-dom'
// import { Title } from '@material-ui/icons'
import ArrowRightIcon from '@material-ui/icons/ArrowRight';
import './home.less'
import BannerImg from '@/assets/images/home/xiaolang.png'
import Topic1 from '@/assets/images/home/books.png'
import Topic2 from '@/assets/images/home/examination.png'
import Topic3 from '@/assets/images/home/practice.png'
import ExamItem from '@/components/ExamItem'

function Home(props) {
    const history = useHistory()
    const [title, setTitle] = useState('')
    const [itemCount, setItemCount] = useState(0)
    const [collect, setCollect] = useState(0)
    const [study, setStudy] = useState(2)
    const [wrong, setWrong] = useState(0)
    const [exemItems, setExamItems] = useState([])
    const [actionCode, setActionCode] = useState(0)
    // eslint-disable-next-line
    useEffect(async () => {
        try {
            const res = await GetHomeApi()
            // console.log(res)
            const { exam, exemItems, collect, wrong } = res.data
            if (res.errCode === 0) {
                setTitle(exam.title)
                setItemCount(exam.itemCount)
                setCollect(collect)
                setStudy(study)
                setWrong(wrong)
                setExamItems(exemItems)
                setActionCode(exam.actionCode)
                localStorage.setItem('toggle', exam.actionCode)
            }
        } catch (err) {
            // console.dir(err.response.data.message)
            if (err) {
                if (err.response.data.errCode === 1002) {
                    props.error(err.response.data.message)
                    history.push('/login')
                }
            }
        }
    }, [history, study, props])

    const changeFn = () => {
        history.push({
            pathname: '/toggle',
            state: {
                actionCode,
                title: title
            }
        })
    }

    return (
        <div>
            {/* 头部 */}
            <div className="top-header">
                <h2>{title}</h2>
                <div className="change-subject">
                    <span onClick={changeFn}>切换考试科目</span>
                    <ArrowRightIcon />
                </div>
            </div>
            <div className="Body">
                {/*  学习库板块 */}
                <div className="top-banner">
                    <div className="title">欢迎Tomato来到菜菜子学习库</div>
                    <div className="bannerbottom">
                        <div className="banner-img">
                            <img src={BannerImg} alt="" />
                        </div>
                        <div className="info">
                            <div className="calc">
                                <span>已学{study}题</span> | <span>共{itemCount}题</span>
                            </div>
                            <div className="info-bot">
                                <span>
                                    <div className="num">{wrong}</div>
                                    <span>错题</span>
                                </span>
                                <span>
                                    <div className="num">{collect}</div>
                                    <span>收藏</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 三个按钮 */}
                <div className="ThreeTopic">
                    <div className="Topic">
                        <img src={Topic1} alt="" />
                    </div>
                    <div className="Topic">
                        <img src={Topic2} alt="" />
                    </div>
                    <div className="Topic">
                        <img src={Topic3} alt="" />
                    </div>
                </div>
                <div className="tiku">
                    <div className="title">
                        <span className="Big">学科题库</span>
                        <span className="Small">坚持每一天，成长看得见</span>
                    </div>

                </div>
                <div className="exam-list">
                    {
                        exemItems.map(item => {
                            return <ExamItem key={item.actionCode} data={item}></ExamItem>
                        })
                    }
                </div>
            </div>

        </div>
    )
}
export default connect(null, alertDispatch)(CheckLogin(Home))
